¡Hola 👋! Espera mientras comienza la sesión.

Antes que todo, ¿cómo están?

Visualización de Información

IIC2026 2021-2

Introducción a HTML, CSS y SVG

Visualización de Información

IIC2026 2021-2

Contenido

Contenido


1. HTML

2. CSS

3. SVG

4. Desarrollo web

Implementación algorítmica

  • Código.
  • Nivel técnico tecnológico.
  • Se revisa eficiencia, escalabilidad y dificultad.
Caracterización de dominio
Abstracción de datos y tareas
Codificación visual y de interacción
Implementación algorítmica

Desarrollo web


  • Disciplina de quienes crean páginas web.
  • Utilizan técnologías web: HTML, CSS y JavaScript (al menos).
  • ¡Un mundo gigante para aprender!

¿Visualización o desarrollo web? 🤔


  • La web es uno de los medios de comunicación más importantes.
  • La web es transitada de forma masiva todos los días.
  • La web permite formas de interacción que sobrepasan otros medios.
  • ¡La web es un lugar perfecto para visualización!

¡Visualización del día!

¡Visualizaciones del día!

Propuesto por estudiante Brian Murtagh.

(Fuente: Theories of Everything, Mapped)

¡Actividad grupal!

¡Actividad grupal!

A cada grupo asignado a una Sala de Zoom, debe escribir en conjunto un documento HTML. Cada documento debe contener sólo 2 cosas:

  • Una lista no ordenada con los nombres de las personas que forman el grupo.
  • Una imagen SVG que contenga un bosquejo de un animal mediante figuras geométricas: círculos, rectángulos, líneas, etc…

Se les entregará el siguiente código base:


<!DOCTYPE html>
<html>
  <head>
    <title>Ejercicio HTML+SVG</title>
  </head>
  <body>
    <!-- Integrantes -->
    <ul>
    </ul>

    <!-- Dibujo -->
    <!-- Objetivo: X -->
    <svg width="500" height="500">
    </svg>
  </body>
</html>

¡Actividad grupal!


Les dejamos algunas referencias de documentación de ciertas figuras SVG:


Les recomendamos designar al menos una persona que tenga documentación de elementos SVG a mano para consultarla, y el resto apoye dibujando.

¡Actividad grupal!


Para colaborar en el código, pueden:

El equipo docente les preparó salas en Coding Rooms. Para ingreasr y colaborar deben entrar a un enlace y luego:

  1. Por defecto, entrarán a la sala solo con permiso de lectura, por lo que un ayudante les asignará el rol de editor a les primeres que entren.
  2. Si ya tienen rol de editor, pueden darle este rol a otros estudiantes. Para ello:
    1. Presionen el botón ‘Share’ en la parte superior derecha.
    2. En el cuadro desplegado, cambia el rol de todes les ‘Viewer’ a ‘Editor’ (Si no salen en el cuadro desplegado, recarguen la página)
  3. Para poder ver cómo va quedando su código, despliguen la vista de navegador en el botón ‘View Webpage’ de la parte inferior derecha.
  4. ¡Listo! Ya pueden ponerse a trabajar conjuntamente en su HTML y SVG.

¡Actividad grupal!

Salas y documentos asignados:

Break antes de continuar

Resultados de actividad grupal

Desarrollo web


¡Un mundo gigante para aprender!

Próximos eventos:


Recuerden responder los Cuestionarios asociados a esta semana y la anterior.

Próxima semana revisaremos el material de Percepción e Introducción a JavaScript y D3.js.

Próxima semana se publica primera evaluación del curso: Entrega 1. Es formativa y puede realizarse en parejas.

Introducción a HTML, CSS y SVG

Visualización de Información

IIC2026 2021-2


¡Nos vemos!